<template>
  <div >
    <!-- 整个页面 -->
    <el-container>
      <!-- 顶部 -->
      <el-header class="layout-header" >
        <el-row>
          <el-col :span="12">
            <div style="font-size: 20px">
              欢迎来到LeDao宠物医院官方网站
            </div>
          </el-col>
          <el-col :span="12">
            <div class="a1" style="margin-right: 27%" align="right">
              <a href="/home/login">登陆</a>
              <el-divider direction="vertical"></el-divider>
              <a href="">注册</a>
              <el-divider direction="vertical"></el-divider>
              <a href="">联系我们(请求登录)</a>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 下半部分 -->
<!--      <el-main class="layout-main">-->
        <el-row>
          <el-col :span="8" align="right">
            <div class="demo-image">
              <div class="block">
                <el-image
                    style="width: 300px; height: 80px"
                    :src='url'
                    :fit="fit"></el-image>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
            >
              <el-menu-item index="1" style="background-color: #42b983; height: 80px">
                <a href="/home" style="text-decoration: none" >主页</a>
              </el-menu-item>
              <el-submenu index="2" style="height: 80px">
                <template slot="title">客户服务</template>
              </el-submenu>
              <el-submenu index="3" style="height: 80px">
                <template slot="title">购物服务</template>
              </el-submenu>
              <el-submenu index="4" style="height: 80px">
                <template slot="title">了解更多</template>
              </el-submenu>
            </el-menu>
          </el-col>
          <el-col :span="8">
            <el-row class="top-button" style="line-height: 80px">
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
              <el-button type="primary" icon="el-icon-s-goods">商城</el-button>
              <el-button type="primary" >登录</el-button>
            </el-row>
          </el-col>
        </el-row>
<!--      </el-main>-->
      <!--中间部分 -->
      <el-footer class="layout-footer" style="height:auto;">
        <el-row >
            <router-view/>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeMenuItemPath: '',
      fit:  'contain',
      url: '/images/img/logo3.png'
    }
  },
  created(){

  },
  mounted() {
    let path = this.$router.currentRoute.path;
    this.activeMenuItemPath = path;
    let lastSegment = path.substring(path.lastIndexOf('/'));
    if (lastSegment.startsWith('/spu-add-new')) {
      this.activeMenuItemPath = '/sys-admin/product/spu-add-new';
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style>
body {
  background-color: #fff !important;
  height: 100%;
  margin: 0px;
}

.layout-footer{
  position: absolute;
  bottom: 0;
  top: 140px;
  right: 0;
  left: 0;
  background-color: #f0f0f0;
}

.layout-header {
  background: #1684b0;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
}
.a1 a{
  text-decoration: none;
  color: white;
}
.top-button{
  text-align: left;
}

.layout-aside i {
  color: #fff;
}
.el-menu-demo{
  text-decoration: none;
}

</style>